<template>
	<view class="result-custom-page" :style="{backgroundImage:'url('+staticImgs.topBg+')'}" v-if="isLoadOk">
		<view class="base-info-wrapper">
			<view class="num-box">测评报告编号：{{report.serialNumber}}</view>
			<view class="name-box">
				{{report.name}}
			</view>
			<view class="conclusion-box">
				<view class="tit" v-if="report.conclusion">{{report.conclusion}}</view>
				<view class="sub-tit" v-if="report.subConclusion">
					{{report.subConclusion}}
				</view>
				<view class="label">
					报告结果
				</view>
				<view class="time">测评时间：{{report.sclTime}}</view>
				<view v-if="report.qsnMax" class="statistics-total">本测试共{{report.qsnMax}}题，你答对了{{report.rightQsn}}题
				</view>
			</view>
		</view>

		<view class="data-conclusion-box" v-if="report.scoreInfoType != 'hide'">
			<template v-if="report.scoreInfoType == '1' || report.scoreInfoType == '3'">
				<view class="label-wrapper-1">
					<view class="text col-1">维 度</view>
					<view class="text col-2">{{report.scoreInfoRightStr || '我的指标'}}</view>
					<!-- <view class="text col-3">我的指标</view> -->
				</view>

				<view class="data-wrapper-1">
					<!-- index === 0 ? 'head-row' : -->
					<view :class="['row']" v-for="(item,index) in report.scoreArr" :key="index">
						<view class="col-1">
							<text class="text">{{item.label}}</text>
							<!-- <template v-if="index != 0"> -->
							<text class="colon">:</text>
							<!-- </template> -->
						</view>
						<view class="col-2">
							<text class="num" v-show="item.score">{{item.score}}</text>
						</view>
						<view class="col-3">{{item.str}}</view>
						<!-- <view class="col-4">{{item.commonInfo}}</view> -->
					</view>
				</view>
			</template>
			<template v-else-if="report.scoreInfoType == '2'">
				<view class="label-wrapper-2">
					<view class="text col-1">得 分</view>
					<view class="text col-2">健康指标</view>
				</view>
				<view class="data-wrapper-2">
					<view :class="['row']" v-for="(item,index) in report.scoreArr" :key="index">
						<view class="col-1">
							<text class="text">{{item.score}}</text>
							<!-- <text class="colon"></text> -->
						</view>
						<!-- <view class="col-2" >
              <text class="num" v-show="item.score">{{item.score}}</text>
            </view> -->
						<view class="col-2">{{item.healthScore}}</view>
					</view>
				</view>
			</template>
			<view v-else-if="report.scoreInfoType == '4'" class="scoreinfo-cls-4">
				<view class="label-wrapper">
					<view class="col-1">维度</view>
					<view class="col-2">我的指标</view>
					<view class="col-3">健康指标</view>
				</view>
				<view class="data-wrapper">
					<view :class="[index === 0 ? 'head-row' :'row']" v-for="(item,index) in report.scoreArr"
						:key="index">
						<view class="col-1">
							{{item.label}}
							<!-- <text class="text">{{item.label}}</text> -->
							<!-- <text class="colon"></text> -->
						</view>
						<!-- <view class="col-2" >
              <text class="num" v-show="item.score">{{item.score}}</text>
            </view> -->
						<view class="col-2">{{item.score}}</view>
						<view class="col-3">{{item.conclusion}}</view>
						<view class="col-4">{{item.healthScore}}</view>
					</view>
				</view>
			</view>
		</view>


		<view class="main-img-box" v-if="report.mainImg && isSclAllReport != 'N'">
			<BlockTit tit="总体情况" />
			<view class="main-img-inner-box">
				<image :src="report.mainImg" mode=""></image>
			</view>
		</view>

		<view class="radar-box" v-if="report.hasRadarGraph && isSclAllReport != 'N'">
			<BlockTit tit="多维雷达图" />
			<view class="radar-canvas" v-if="showCanvas">
				<CommonChart type="radar" :chartData="RadarModel" background="none" canvasId="school_b"
					:animation="false" :canvas2d="isCanvas2d" :opts="{
             dataLabel:true,
             fontColor:'#333',
             fontSize:14,
             legend:{
               show:false
             },
             extra:{
               radar:{
                 gridType:'radar',
                 radius:90,
                 labelShow:true,
                 border:true,
                 gridCount:4,
                 axisLabel:false,
                 max:radarMax,
               }
             },
           }" :resshow="delayload" />
			</view>
		</view>

		<template v-if="report.normComparison && isSclAllReport != 'N'">
			<view class="dashed-line"></view>
			<view class="norm-comparison-box">
				<BlockTit tit="常模对比" />
				<view class="tit">{{report.normComparison.tit}}</view>
				<view class="legend-wrapper">
					<view class="legend">
						<image :src="report.normComparison.url" mode=""></image>
					</view>

					<view class="annotation-wrapper">
						<view class="annotation-box" v-for="(item,index) in report.normComparison.legend">
							<view class="icon" :style="{'background':item.color}"></view>
							<view class="text">{{item.label}}</view>
						</view>
					</view>
				</view>
			</view>
		</template>


		<view v-if="report.startIntroduces && isSclAllReport != 'N'">
			<view class="dashed-line"></view>
			<view class="detailed-results-box">
				<BlockTit :tit="report.startIntroduces.tit" />
				<view class="summary-wrapper">
					<view class="p">{{report.startIntroduces.p}}</view>
				</view>
			</view>
		</view>

		<template v-if="report.detailedResults">
			<view class="dashed-line"></view>
			<view class="detailed-results-box">
				<BlockTit tit="结果详解" v-if="isSclAllReport != 'N'" />
				<view style="height: 40rpx;width: 20rpx;" v-if="isSclAllReport == 'N'"></view>
				<!-- {{report.imgAndScoreBlockType}} -->
				<view v-if="report.imgAndScoreBlockType == '1' && isSclAllReport != 'N'" class="img-and-score-block">
					<view class="tip-text-1">{{report.otherTipText}}</view>
					<view class="tip-text-2">{{report.firstScore}}</view>
					<view class="img-box">
						<image :src="report.otherTipImg" mode=""></image>
					</view>
				</view>

				<view class="summary-wrapper" v-if="report.detailedResults.p && isSclAllReport != 'N'">
					<view class="tit" v-if="report.detailedResults.tit">{{report.detailedResults.tit}}</view>
					<view class="p">{{report.detailedResults.p}}</view>

				</view>
				<image mode="widthFix" class="main-img" v-if="report.detailedResults.img && isSclAllReport != 'N'"
					:src="report.detailedResults.img">
					<!-- {{report.detailedResults.img}} -->
				</image>

				<template v-for="(item,index) in report.detailedResults.contentArr">
					<!-- {{JSON.stringify(item)}} -->
					<template v-if="isSclAllReport != 'N' || index === 0">
						<view class="block">
							<view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
							<view class="sub-tit-score" v-if="item.weiDuScore||item.weiDuScore=='0'">得分：{{item.weiDuScore}}</view>
							<view v-if="item.p" class="p">{{item.p}}</view>
							<view v-if="item.img" class="sub-img-wrapper">
								<image :src="item.img" class="sub-img" mode="widthFix"></image>
							</view>
							<!-- {{JSON.stringify(item.contentArr)}} -->
							<view v-if="item.contentArr">
								<template v-for="(subItem,subIndex) in item.contentArr">
									<template v-if="isSclAllReport != 'N' || subIndex === 0 || subIndex === 1">
										<view v-if="subItem.conclusion" class="conclusion">「{{subItem.conclusion}}」</view>
										<view v-if="subItem.p" class="p">{{subItem.p}}</view>
									</template>
								</template>
							</view>
						</view>
						<view v-if="item.hasLine" class="dashed-line"></view>
					</template>
				</template>
			</view>
		</template>

		<template v-if="report.sciencePopularization && isSclAllReport != 'N'">
			<view class="science-popularization-box">
				<BlockTit tit="知识科普" />
				<view class="summary-wrapper">
					<view class="img">
						<image :src="staticImgs.resultImg1" mode=""></image>
					</view>
					<view class="tit" v-if="report.sciencePopularization.tit">{{report.sciencePopularization.tit}}
					</view>
				</view>
				<template v-if="report.sciencePopularization.contentArr">
					<template v-for="(item,index) in report.sciencePopularization.contentArr">
						<view class="block">
							<view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
							<view class="sub-img" v-if="item.img">
								<image :src="item.img" mode="widthFix"></image>
							</view>
							<view class="p" v-if="item.p">
								{{item.p}}
							</view>
							<view class="text-list" v-else-if="item.list">
								<view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}
								</view>
							</view>
							<template v-else-if="item.contentArr">
								<template v-for="(subItem,subIndex) in item.contentArr">
									<view class="sub-sub-tit" v-if="subItem.tit">
										{{subItem.tit}}
									</view>
									<view class="p" v-if="subItem.p">
										{{subItem.p}}
									</view>
									<view class="p-arr" v-if="subItem.pArr">
										<view class="p-arr-item" v-for="(pItem,pIndex) in subItem.pArr" :key="pIndex">
											{{pItem}}
										</view>
									</view>

								</template>

							</template>
						</view>
						<!-- <view class="dashed-line"></view> -->
					</template>
				</template>
			</view>

		</template>


		<template v-if="report.suggestions && isSclAllReport != 'N'">
			<view class="suggestions-box">
				<BlockTit tit="针对性小建议" />
				<!-- {{report.suggestions}} -->
				<view class="summary-wrapper">
					<view class="img">
						<image :src="staticImgs.resultImg2" mode=""></image>
					</view>
					<view class="p" v-if="report.suggestions.p">
						{{report.suggestions.p}}
					</view>
				</view>

				<template v-for="(item,index) in report.suggestions.contentArr">
					<view class="block">
						<view class="sub-tit" v-if="item.tit">{{item.tit}}</view>
						<view class="p" v-if="item.p">
							{{item.p}}
						</view>
						<view class="p-arr" v-if="item.pArr">
							<view class="p-arr-item" v-for="(pItem,pIndex) in item.pArr" :key="pIndex">
								{{pItem}}
							</view>
						</view>
						<view class="text-list" v-else-if="item.list">
							<view class="li" v-for="(subItem,subIndex) in item.list" :key="subIndex">{{subItem}}</view>
						</view>
						<template v-else-if="item.contentArr">
							<template v-for="(subItem,subIndex) in item.contentArr">
								<view class="sub-sub-tit" v-if="subItem.tit">
									（{{subIndex+1}}) {{subItem.tit}}
								</view>
								<view class="p">
									{{subItem.p}}
								</view>
								<view class="p-arr" v-if="subItem.pArr">
									<view class="p-arr-item" v-for="(pItem,pIndex) in subItem.pArr" :key="pIndex">
										{{pItem}}
									</view>
								</view>
							</template>

						</template>
					</view>
					<!-- <view class="dashed-line"></view> -->
				</template>
			</view>
		</template>



		<view class="references-box" v-if="referenceList && referenceList.length && isSclAllReport != 'N'">
			<view class="tit">参考文献</view>
			<view class="text-list">
				<view class="text" v-for="(text,index) in referenceList" :key="index">
					[{{index+1}}]{{text}}
				</view>
			</view>
		</view>

		<view class="report-time-box" v-if="isSclAllReport != 'N'">
			<view>此测评报告仅供参考</view>
			<view>报告时间：{{report.createTime}}</view>
		</view>
	</view>
</template>

<script>
	import BlockTit from '@/subcontractorB/components/BlockTit.vue'
	import CommonChart from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			BlockTit,
			CommonChart
		},
		props: {
			pageData: {
				type: Object,
				default: null
			},
			showCanvas: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isSclAllReport: 'Y',
				staticImgs: {
					topBg: this.imgBaseURL + '/scl/scl_result_custom_bg.png',
					resultImg1: this.imgBaseURL + '/scl/scl_result_info.png',
					resultImg2: this.imgBaseURL + '/scl/scl_result_suggestion.png',
					point: this.imgBaseURL + '/scl/result/progress-point-1.png',
				},
				referenceList: [],
				isLoadOk: false,
				report: {},
				RadarModel: {},
				delayload: false,
				radarMax: 60,
			}
		},
		watch: {
			showCanvas(val) {
				if (val) {

				}
			},
			pageData: {
				handler(v) {
					console.log(v, '======pageDatas')
					if (v) {
						this.isSclAllReport = v.detailInfo.isSclAllReport || 'Y'
						console.log(this.isLoadOk, '--====this.isLoadOk')
						this.report = v
						this.referenceList = v.literatrue
						this.RadarModel = v.radarData
						this.isLoadOk = true
						if (v.radarMax) {
							this.radarMax = v.radarMax
						}

						this.getData()
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			async getData() {
				uni.showLoading();
				await setTimeout(() => {
					this.delayload = true;
					uni.hideLoading();
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
		word-break: break-all;
	}

	.img-and-score-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 70rpx;
		padding-bottom: 40rpx;

		.tip-text-1 {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #185199;
			// line-height: 56rpx;
			text-align: center;
			font-style: normal;
		}

		.tip-text-2 {
			font-size: 60rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			// font-size: 40rpx;
			color: #185199;
			// line-height: 56rpx;
			text-align: center;
			font-style: normal;
			margin-bottom: 40rpx;
		}

		.img-box {
			width: 694rpx;
			height: 648rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.result-custom-page {
		box-sizing: border-box;
		width: 100vw;
		min-height: 100vh;
		position: relative;
		background-size: 750rpx 1310rpx;
		background-repeat: no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);


		.base-info-wrapper {
			margin: auto;
			padding: 90rpx 28rpx 80rpx 28rpx;

			.num-box {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 300;
				color: #666666;
			}

			.name-box {
				margin: auto;
				margin-top: 12rpx;
				// width: 696rpx;
				width: 100%;
				height: 120rpx;
				// background: #FFFFFF;
				box-shadow: 0rpx 12rpx 20rpx 0rpx #EEF4FF;
				border-radius: 12rpx;
				// opacity: 0.6;
				background-color: rgba(255, 255, 255, .6);
				border: 3rpx solid #AAC4F9;

				line-height: 120rpx;
				text-align: center;

				font-size: 40rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				color: #1A1B1F;
			}

			.conclusion-box {
				margin-top: 100rpx;
				display: flex;
				align-items: center;
				flex-direction: column;

				.tit {

					font-size: 50rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #185199;

					width: 550rpx;
					text-align: center;
				}

				.sub-tit {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #185199;
					line-height: 42rpx;
					text-align: center;
					font-style: normal;
					margin-top: 14rpx;
				}

				.statistics-total {
					width: 480rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1px solid #B4D3EF;
					box-sizing: border-box;

					margin-top: 30rpx;

					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 60rpx;
					text-align: center;
					font-style: normal;
				}

				.label {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #333333;

					position: relative;

					&::after {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						right: -29rpx;
						position: absolute;
					}

					&::before {
						width: 17rpx;
						height: 1rpx;
						content: '';
						background-color: #979797;
						top: 50%;
						transform: translateY(-50%);
						left: -29rpx;
						position: absolute;
					}
				}

				//.label - end

				.time {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					color: #666666;
				}
			}
		}

		// ..base-info-wrapper - end
		.data-conclusion-box {
			width: fit-content;
			margin: auto;

			.col-1 {
				// width: 330rpx;
				width: 48%;
				padding-left: 30rpx;
			}

			.col-2 {
				// width: 190rpx;
				width: 28%;
			}

			.col-3 {
				// width: 180rpx;
				width: 24%;
				padding-right: 24rpx;
			}

			.label-wrapper,
			.label-wrapper-1,
			.label-wrapper-2 {
				display: flex;
				width: 700rpx;
				margin: auto;
				border-bottom: 4rpx solid #333;
				padding-bottom: 16rpx;
				justify-content: space-between;

				.text {
					font-size: 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					color: #333333;
				}

			}

			.data-wrapper,
			.data-wrapper-1,
			.data-wrapper-2 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-bottom: 64rpx;
				width: 710rpx;
				margin-top: 16rpx;
				box-shadow: 0px 0px 0px 0.5px #c1c1c1;
				padding-bottom: 24rpx;

				.head-row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 96rpx !important;
					background: rgba(211, 224, 255, .32);

					.col-1 {
						width: 32%;
						padding-left: 30rpx;

						.text {
							font-size: 36rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}

						.colon {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}
					}

					.col-2 {
						width: 16%;

						.num {
							font-size: 46rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #6B77FF;
						}
					}

					.col-3 {
						width: 28%;

						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #EE5757;
						margin-left: 4rpx;
					}

					.col-4 {
						width: 24%;
						padding-right: 24rpx;
						padding-right: 54rpx;
						text-align: right;

						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #393C5A;
						margin-left: 20rpx;
					}

				}

				.row {
					display: flex;
					align-items: center;
					width: 100%;
					height: 78rpx;

					.col-1 {
						width: 33%;
						padding-left: 26rpx;

						.text {
							// font-size: 36rpx;
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}

						.colon {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #393C5A;
						}
					}

					.col-2 {
						width: 16%;

						.num {
							// font-size: 46rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #6B77FF;
							font-size: 32rpx;
						}
					}

					.col-3 {
						text-align: right;
						width: 38%;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						margin-left: 4rpx;
						font-size: 24rpx;
						color: #333333;
					}

					.col-4 {
						width: 24%;
						padding-right: 24rpx;
						padding-right: 54rpx;
						text-align: right;

						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #393C5A;
						margin-left: 20rpx;
					}

				}

			}


			.data-wrapper-1 {

				.row {
					.col-1 {
						width: 40%;
					}
				}
			}



			.label-wrapper-2 {
				.col-1 {
					text-align: left;
				}

				.col-2 {
					text-align: right;
					padding-right: 28rpx;
				}
			}

			.data-wrapper-2 {
				padding-bottom: 0;

				.row {
					display: flex;
					justify-content: space-between;

					background: rgba(211, 224, 255, 0.3);

					.col-1 .text {
						font-size: 46rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #6B77FF;
						// padding-left: 38rpx;
						padding-left: 16rpx;
					}

					.col-2 {
						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #393C5A;
						width: 28%;

						text-align: right;
						padding-right: 40rpx;
					}
				}

			}


			.scoreinfo-cls-4 {
				.label-wrapper {
					.col-1 {
						text-align: left;
						width: 290rpx;
					}

					.col-2 {
						text-align: left;
						width: 140rpx;
					}

					.col-3 {
						text-align: right;
						width: 160rpx;
					}
				}

				.data-wrapper {

					.head-row .col-1 {
						color: #333333 !important;
					}

					.col-1 {
						text-align: left;
						// min-width: 120rp;
						width: 200rpx;
					}

					.col-2 {
						width: 100rpx;
						margin: 0 10rpx;
					}

					.col-3 {
						text-align: left;
						width: 180rpx;
						padding-left: 40rpx;
					}

					.col-4 {
						width: 220rpx;
					}
				}
			}

			//scoreinfo-cls-4 - end

		}

		// .data-conclusion-box - end

		.main-img-box {
			margin: auto;
			margin-top: 70rpx;


			.main-img-inner-box {
				margin: auto;
				margin-bottom: 24rpx;
				width: 642rpx;
				height: 564rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.radar-box {
			.radar-canvas {
				margin-top: 36rpx;
			}
		}

		.dashed-line {
			margin: auto;
			width: 694rpx;
			height: 1rpx;

			background-image: repeating-linear-gradient(to right,
					#A9C4F2,
					#A9C4F2 10rpx,
					transparent 10rpx,
					transparent 20rpx);
		}

		// .dashed-line - end

		.progress-box {
			padding-top: 48rpx;
		}

		.progress-comp {
			margin-top: 70rpx;
			margin-bottom: 70rpx;

			display: flex;
			flex-direction: column;
			width: 100%;
			position: relative;

			display: flex;
			align-items: center;


			.bg {
				width: 592rpx;
				height: 320rpx;
			}

			.point-comp {
				position: absolute;
				bottom: 10rpx;
				left: 354rpx;
				z-index: 2;
				// transform: rotateZ(45deg);
				// transform-origin: bottom;
				transform-origin: bottom center;

				.point {
					margin: auto;
					width: 48rpx;
					height: 285rpx;
				}
			}

			.num-1,
			.num-2,
			.num-3,
			.num-4,
			.num-5 {
				position: absolute;
				bottom: 0;
				font-size: 20rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;
				z-index: 1;
			}

			.num-1 {
				left: 230rpx;

			}

			.num-5 {
				right: 230rpx;
			}

			.num-2 {
				left: 252rpx;
				bottom: 90rpx;
			}

			.num-4 {
				bottom: 90rpx;
				right: 252rpx;
			}

			.num-3 {
				bottom: 130rpx;
			}


		}

		.norm-comparison-box {
			// margin: auto;
			margin-top: 70rpx;
			margin-bottom: 70rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.tit {
				margin: auto;
				margin-top: 60rpx;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.legend-wrapper {
				.legend {
					margin: auto;
					margin-top: 80rpx;

					&,
					image {
						width: 472rpx;
						height: 472rpx;
						// background-color: #185199;
					}
				}

				.annotation-wrapper {
					margin-top: 60rpx;

					display: flex;
					align-items: center;
					padding: 0 40rpx;
					// justify-content: space-between;
					justify-content: center;
					column-gap: 40rpx;

					.annotation-box {
						display: flex;
						align-items: center;

						.icon {
							width: 16rpx;
							height: 16rpx;
							// background: #A09FF2;
							border-radius: 11rpx;
							margin-right: 6rpx;
						}

						.text {
							font-size: 24rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

			//.legend-wrapper - end


		}

		// .norm-comparison-box - end

		.detailed-results-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.summary-wrapper {
				.tit {}
			}

			.main-img {
				width: 596rpx;
				// height: 596rpx;
				margin: auto;
				margin-top: 50rpx;
			}

			.conclusion {
				margin-bottom: 6rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #195199;
				line-height: 48rpx;
				text-align: justify;
				font-style: normal;
			}

			.sub-img-wrapper {
				display: flex;
				justify-content: center;
			}

			.sub-img {

				max-width: 500rpx;
				height: auto;
				margin: auto;
			}



		}

		// .detailed-results-box - end

		.science-popularization-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.summary-wrapper {
				.img {
					margin: auto;
					margin-bottom: 52rpx;

					&,
					image {
						width: 568rpx;
						height: 248rpx;
						// background-color: #185199;
					}
				}

				.tit {}
			}

			.sub-img {
				margin: auto;
				margin-bottom: 48rpx;

				&,
				image {
					width: 568rpx;
				}
			}

		}

		// .science-popularization-box - end

		.suggestions-box {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.summary-wrapper {
				.img {
					margin: auto;
					margin-bottom: 70rpx;

					&,
					image {
						width: 558rpx;
						height: 276rpx;
						// background-color: #185199;
					}
				}

				.tit {}
			}
		}

		// .suggestions-box - end

		.references-box {
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			width: 100%;

			.tit {
				margin-left: 36rpx;
				width: fit-content;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #195199;
				padding-bottom: 6rpx;
				border-bottom: 2rpx solid rgba(25, 81, 153, .3);
			}

			.text-list {
				margin: auto;
				margin-top: 18rpx;
				width: 675rpx;
				// height: 1416rpx;
				border: 1rpx solid #C1C1C1;
				padding: 14rpx 18rpx;

				.text {
					font-size: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					color: #666666;
					line-height: 46rpx;
					text-indent: 1.5em;

					text-align: justify;

				}
			}
		}

		// .references-box -end
		.report-time-box {
			margin: auto;
			margin-top: 32rpx;
			width: 709rpx;
			border-top: 4rpx solid #666;
			padding-top: 16rpx;
			padding-bottom: 50rpx;
			padding-left: 14rpx;
			padding-right: 14rpx;
			display: flex;
			justify-content: space-between;

			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 300;
			color: #666666;

		}




		.p {

			font-size: 32rpx;
			font-family: PingFang-SC, PingFang-SC;
			// font-weight: 500;
			color: #333333;
			line-height: 62rpx;
			text-indent: 1.5em;

			text-align: justify;
		}

		.summary-wrapper {
			padding: 0 40rpx;
			margin-top: 50rpx;
			margin-bottom: 30rpx;

			.tit {
				margin: auto;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #185199;
				margin-bottom: 50rpx;

			}
		}

		.block {
			padding: 0 40rpx;
			margin-bottom: 40rpx;

			.p {
				margin-bottom: 40rpx;
			}

			.sub-tit {
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				color: #195199;
				margin-bottom: 18rpx;
				margin-top: 70rpx;
				// margin-left: -24rpx;
				margin-left: -4rpx;
			}
			
			.sub-tit-score {
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				color: #195199;
				margin-bottom: 18rpx;
				// margin-left: -24rpx;
				margin-left: -4rpx;
			}

			.sub-sub-tit {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 18rpx;
			}

			.p-arr-item {
				font-size: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				color: #333333;
				line-height: normal;
				text-indent: 1.5em;
				text-align: justify;
				margin-bottom: 2px;
			}

			.p-arr {
				margin-bottom: 28rpx;
			}

			.text-list {
				display: flex;
				flex-direction: column;
				row-gap: 16rpx;

				.li {
					width: 694rpx;

					// width: 592rpx;
					height: 75rpx;
					line-height: 75rpx;
					background-image: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, rgba(245, 249, 255, 0.4) 53%, #D8E9FF 100%);
					background-size: 592rpx 75rpx;
					background-repeat: no-repeat;
					border-radius: 2rpx;
					// opacity: 0.43;

					font-size: 34rpx;
					font-family: PingFang-SC, PingFang-SC;
					// font-weight: 500;
					color: #333333;

					padding-left: 20rpx;
				}
			}
		}

	}
</style>